/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* =============================================================
*/

@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";

.image-select-item {
  position: relative;
  flex: 1;
  max-width: 100px;
  padding: 10px 10px 4px;
  margin-right: 10px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #ddd;

  .image-title {
    line-height: 28px;
  }

  span {
    position: absolute;
    right: 0;
    bottom: 0;
    display: none;

    @include triangle(20px, 20px, $primaryColor, right-up);

    i {
      @include checkmark(6px, 12px, 2px, #fff);

      position: absolute;
      top: -2px;
      line-height: 0;
      color: #fff;
      transform: scale(0.8) rotate(45deg);
    }
  }

  &.is-active {
    color: $primaryColor;
    border-color: $primaryColor;

    span {
      display: block;
    }
  }
}
